<template>
	<Row class="data-dictionary" style="padding:10px;">
		<Row>
			<Form label-position="top">
				<Row>
					<Col span="5" v-if="this.personType === 1">
					<FormItem label style="margin-bottom: 14px;">
						<Select v-model="formData.enterpriseId" style="width: 90%;" ref="treeSelect" placeholder="机构">
							<Option v-for="item in list1" :value="item.enterpriseId" :key="item.enterpriseId" style="display: none;">{{ item.title }}</Option>
							<Tree :data="orgList" style="padding:0 10px" @on-select-change="checkEng"></Tree>
						</Select>
					</FormItem>
					</Col>
					<Col span="5">
					<FormItem label style="margin-bottom: 14px;">
						<Select v-if="this.personType != 3" clearable v-model="formData.projectTeamId" style="width: 90%;" placeholder="项目">
							<Option v-for="item in proList" :value="item.id" :key="item.id">{{ item.shortName }}</Option>
						</Select>
						<Select v-if="this.personType == 3" v-model="formData.projectTeamId" style="width: 90%;" placeholder="项目">
							<Option v-for="item in proList" :value="item.id" :key="item.id">{{ item.shortName }}</Option>
						</Select>
					</FormItem>
					</Col>
					<Col span="5">
					<FormItem label style="margin-bottom: 14px;">
						<DatePicker @on-change="dateChange" type="month" :value="formData.date" :clearable="clearable" placeholder="每月动态" style="width: 90%"></DatePicker>
					</FormItem>
					</Col>
					<Col span="5">
					<FormItem label style="margin-bottom: 14px;">
						<Input clearable style="width: 90%;" v-model="formData.constructionPointName" placeholder="工点名称" />
					</FormItem>
					</Col>
					<Col span="5">
					<FormItem label style="margin-bottom: 14px;">
						<Select clearable v-model="formData.isWork" style="width: 90%;" placeholder="是否在施">
							<Option v-for="item in pointState" :value="item.id" :key="item.id">{{ item.name }}</Option>
						</Select>
					</FormItem>
					</Col>
					<Col span="5">
					<FormItem label style="margin-bottom: 14px;">
						<Select clearable v-model="formData.distRiskGrade" style="width: 90%;" placeholder="工点风险等级">
							<Option v-for="item in riskLevelList" :value="item.id" :key="item.id">{{ item.name }}</Option>
						</Select>
					</FormItem>
					</Col>
					<Col span="5">
					<FormItem label style="margin-bottom: 14px;">
						<Select clearable v-model="formData.riskCategoryId" style="width: 90%;" placeholder="作业风险类别">
							<Option v-for="item in riskCategoryList" :value="item.id" :key="item.id">{{ item.riskCategoryName }}</Option>
						</Select>
					</FormItem>
					</Col>
					<Col span="5">
					<FormItem label style="margin-bottom: 14px;">
						<Select clearable v-model="formData.measureType" style="width: 90%;" placeholder="措施类型">
							<Option v-for="item in measureTypeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
						</Select>
					</FormItem>
					</Col>
					<Col span="4" style="text-align: right;float: right;">
					<div class="button-s">
						<Button type="primary" style="margin-right: 15px" @click="searchBtn">搜索</Button>
						<Button type="primary" @click="exportRiskStatistics()">导出</Button>
					</div>
					</Col>
				</Row>
			</Form>
		</Row>
		<Row>
			<Card style="margin-bottom: 10px;background: rgba(245,248,252,1);border-radius: 4px;" dis-hover>
				<Row>
					<Col span="24">
					<Row>
						<Col style="font-weight: 600;" span="4">风险总数 : {{statisticalData.risk.total}}项</Col>
						<Col span="4">Ⅰ级: {{statisticalData.risk.firstLevel}}项</Col>
						<Col span="4">Ⅱ级: {{statisticalData.risk.secondLevel}}项</Col>
						<Col span="4">Ⅲ级: {{statisticalData.risk.thirdLevel}}项</Col>
						<Col span="4">Ⅳ级: {{statisticalData.risk.fourthLevel}}项</Col>
					</Row>
					<Row style="margin-top:10px;">
						<Col style="font-weight: 600;" span="4">措施总数 : {{statisticalData.measure.total}}项</Col>
						<Col span="4">Ⅰ级: {{statisticalData.measure.firstLevel}}项</Col>
						<Col span="4">Ⅱ级: {{statisticalData.measure.secondLevel}}项</Col>
						<Col span="4">Ⅲ级: {{statisticalData.measure.thirdLevel}}项</Col>
						<Col span="4">Ⅳ级: {{statisticalData.measure.fourthLevel}}项</Col>
					</Row>
					</Col>
				</Row>
			</Card>
		</Row>

		<Tabs value="1" @on-click="tabpaneBtn">
			<TabPane :label="label" name="1">
				<Table border :columns="columns" :data="dictList">
					<template slot-scope="{ row, index }" slot="action">
						<span title="详情" class="button-class" type="text" @click="addBtn('details', row.id, '详情')">详情</span>
					</template>
				</Table>
			</TabPane>
			<TabPane :label="label1" name="2">
				<Table border :columns="columns" :data="dictList">
					<template slot-scope="{ row, index }" slot="action">
						<span title="详情" class="button-class" type="text" @click="addBtn('details', row.id, '详情')">详情</span>
					</template>
				</Table>
			</TabPane>
			<TabPane :label="label2" name="3">
				<Table border :columns="columns" :data="dictList">
					<template slot-scope="{ row, index }" slot="action">
						<span title="详情" class="button-class" type="text" @click="addBtn('details', row.id, '详情')">详情</span>
					</template>
				</Table>
			</TabPane>
			<TabPane :label="label3" name="4">
				<Table border :columns="columns" :data="dictList">
					<template slot-scope="{ row, index }" slot="action">
						<span title="详情" class="button-class" type="text" @click="addBtn('details', row.id, '详情')">详情</span>
					</template>
				</Table>
			</TabPane>
		</Tabs>
		<Page v-show="page.total>0" class="tab-page" :total="page.total" :current="page.current" :pageSizeOpts="pageSizeOpts" :page-size="page.pageSize"
		 @on-change="pageChange" @on-page-size-change="sizeChange" show-elevator show-sizer show-total />
	</Row>
</template>

<script>
	export default {
		name: 'dynamic-control-ledger',
		data() {
			return {
				userDetail: JSON.parse(localStorage.getItem('userList')),
				personType: JSON.parse(localStorage.getItem('personType')),
				orgList: [], //机构树
				proList: [], //项目部树
				dictList: [],
				riskCategoryList: [],
				list1: [],
				list2: [],
				clearable: false,
				formData: {
					enterpriseId: '',
					projectTeamId: '',
					constructionPointName: '',
					isWork: "",
					riskLevel: 1,
					riskName: '',
					distRiskGrade: "",
					measureType:"",
					date:new Date().getFullYear() + "-" + ('00'+(new Date().getMonth() + 1)).slice(-2)
				},
				riskLevelList: [
					{
						id: '1',
						name: 'Ⅰ级'
					},
					{
						id: '2',
						name: 'Ⅱ级'
					},
					{
						id: '3',
						name: 'Ⅲ级'
					},
					{
						id: '4',
						name: 'Ⅳ级'
					}
				],
				pointState: [
					{
						id: 1,
						name: '是'
					},
					{
						id: 2,
						name: '否'
					},
				],
				measureTypeList:[
					{
						id: 1,
						name: '管理措施'
					},
					{
						id: 2,
						name: '技术措施'
					},
				],
				statisticalData: {
					"measure": {
						"secondLevel": 0,
						"total": 0,
						"thirdLevel": 0,
						"fourthLevel": 0,
						"firstLevel": 0
					},
					"risk": {
						"secondLevel": 0,
						"total": 0,
						"thirdLevel": 0,
						"fourthLevel": 0,
						"firstLevel": 0
					}
				},
				parentId: '0',
				uploadList: [],
				columns: [{
						title: '序号',
						align: 'center',
						width: 70,
						render: (h, params) => {
							return h('span', params.index + (this.page.current - 1) * this.page.pageSize + 1)
						}
					},
					{
						title: '公司名称',
						key: 'orgName',
						align: 'center',
						tooltip:true
					},
					{
						title: '项目名称',
						key: 'proName',
						align: 'center',
						tooltip:true
					},
					{
						title: '工点名称',
						key: 'constructionPointName',
						align: 'center',
						tooltip:true
					},
					{
						title: '作业风险名称',
						key: 'riskOperationName',
						align: 'center',
						tooltip:true
					},
					{
						title: '作业风险类型',
						key: 'riskCategoryName',
						align: 'center',
						tooltip:true
					},
					{
						title: '管控措施',
						key: 'controlMeasures',
						align: 'center',
						tooltip:true
					},
					{
						title: '措施类型',
						key: 'measureTypeName',
						align: 'center',
						width: 100
					},

					{
						title: '操作',
						align: 'center',
						width: 70,
						slot: 'action'
					}
				],
				pageSizeOpts:[10,20,50,100],
				page: {
					total: 0,
					current: 1,
					pageSize: 10,
					totalPage: 0
				},
				label: h => {
					return h('div', [
						h(
							'span', {
								style: {
									color: '#EF3E43'
								}
							},
							'Ⅰ级风险'
						)
					])
				},
				label1: h => {
					return h(
						'span', {
							style: {
								color: '#F86A30'
							}
						},
						'Ⅱ级风险'
					)
				},
				label2: h => {
					return h(
						'span', {
							style: {
								color: '#F3CF34'
							}
						},
						'Ⅲ级风险'
					)
				},
				label3: h => {
					return h(
						'span', {
							style: {
								color: '#3D6FC9'
							}
						},
						'Ⅳ级风险'
					)
				}
			}
		},
		methods: {
			tabpaneBtn(e) {
				this.page.current = 1;
				this.page.currentPage = 10;
				this.formData.riskLevel = e;
				this.getWbsTabelList();
			},
			//搜索
			searchBtn() {
				this.page.current = 1;
				this.page.currentPage = 10;
				this.getWbsTabelList();
				this.getStatistics();
			},
			//机构树
			getOrgTree() {
				this.orgList = [];
				this.list1 = [];
				this.$api.measurePlan.getOrgTree().then((res) => {
					if (res.code == 200) {
						this.orgList = res.data;
						this.checkEng(this.orgList);
// 						this.getWbsTabelList();
// 						this.getStatistics();

					} else {
						this.$Message.error(res.data.msg);
					}
				})
			},
			//点击机构树
			checkEng(data) {
				if(data.length > 0) {
					this.formData.projectTeamId = '';
					this.list1 = []
					let title = data[0].title
					if(this.$route.query.orgId){
						let enterpriseId = this.$route.query.orgId
						this.list1.push({
							title,
							enterpriseId
						})
						this.getProTree(data[0]);
						this.formData.enterpriseId = enterpriseId
						this.$refs.treeSelect.visible = false
					}else if(data[0].objectId) {
						let enterpriseId = data[0].objectId
						this.list1.push({
							title,
							enterpriseId
						})
						this.getProTree(data[0]);
						this.formData.enterpriseId = enterpriseId
						this.$refs.treeSelect.visible = false
					} else {
						this.$Message.warning('请选择' + title + '下的子集')
					}
				}

			},
			//获取项目
			getProTree(data) {
				this.proList = [];
				this.formData.projectTeamId = '';
// 				if(this.personType === 1 || this.personType === 2) {
// 					this.proList = [{
// 						id: '-1',
// 						shortName: '全部项目',
// 					}];
// 				} 
				this.$api.measurePlan.getProList(data.objectId).then(res => {
					if(res.code === 200) {
						if(res.data.length > 0) {
							res.data.forEach(item => {
								this.proList.push(item);
							});
							
							if(this.personType === 1 || this.personType === 2) {
								this.formData.projectTeamId = "";
							}else{
								this.formData.projectTeamId = this.proList[0].id;
							} 
							if(this.$route.query.projectId){
								this.formData.projectTeamId = this.$route.query.projectId;
							}
							this.getWbsTabelList();
							this.getStatistics();
						}
					} else {
						this.$Message.error(res.message)
					}
				})
			},
//			checkPro(data) { //点击项目树
//				if (data.length > 0) {
//					this.list2 = []
//					let proId = data[0].id
//					let title = data[0].shortName
//					this.list2.push({
//						proId,
//						title
//					})
//					this.formData.projectId = proId
//					this.$refs.treeSelectPro.visible = false
//				}
//			},
			//风险类别
			getRiskCategoryFindAll() {
				this.$api.measuresLibrary.getRiskCategoryFindAll().then(res => {
					if (res.code == 200) {
						this.riskCategoryList = res.data
					} else {
						this.$Message.error(res.message)
					}
				})
			},
			
			//列表
			getWbsTabelList() {
				this.dictList = [];
				this.page.total = 0;
				this.page.totalPage = 0;
				let param = {
					currentPage: this.page.current,
					pageSize: this.page.pageSize,
					whereMap: {
						"orgId": this.formData.enterpriseId,
						"proId": this.formData.projectTeamId || "", //"项目id",
						"riskLevel": this.formData.riskLevel, //风险等级
						"constructionPointName": this.formData.constructionPointName, //"工点名称",
						"isWorkedThisMonth": this.formData.isWork, //"当月是否作业",
						"constructionPointRiskLevel": this.formData.distRiskGrade, //"工点风险等级",
						"riskCategoryIds": this.formData.riskCategoryId, //"风险类别id",
						"measureType": this.formData.measureType || null,
						"controlTime":this.formData.date
//						 "controlTime": ""
					}
				};
				this.$api.ledgerQuery.getDynamicControlReport(param).then(res => {
					if (res.code === 200) {
						this.dictList = res.data.resultObject;
						// this.statisticalData = res.data.statistics;
						this.page.total = res.data.totalRecord;
						this.page.totalPage = res.data.totalPage
					} else {
						this.$Message.warning(res.message)
					}
				})
			},
			//台账统计
			getStatistics() {
				let param = {
					currentPage: this.page.current,
					pageSize: this.page.pageSize,
					whereMap: {
						"orgId": this.formData.enterpriseId,
						"proId": this.formData.projectTeamId || "", //"项目id",
						"constructionPointName": this.formData.constructionPointName, //"工点名称",
						"isWorkedThisMonth": this.formData.isWork, //"当月是否作业",
						"constructionPointRiskLevel": this.formData.distRiskGrade, //"工点风险等级",
						"riskCategoryIds": this.formData.riskCategoryId, //"风险类别id",
						"measureType": this.formData.measureType || null,
						"controlTime":this.formData.date
						// "controlTime": ""
					}
				};
				this.$api.ledgerQuery.getDynamicListStatistics(param).then(res => {
					if (res.code === 200) {
						this.statisticalData = res.data;
					} else {
						this.$Message.warning(res.message)
					}
				})
			},
			dateChange(date){
				this.formData.date = date;
			},
			pageChange(current) {
				this.page.current = current
				this.getWbsTabelList(this.parentId)
			},
			sizeChange(size) {
				this.page.pageSize = size
				this.getWbsTabelList(this.parentId)
			},
			exportRiskStatistics() {
				let param = {
					currentPage: this.page.current,
					pageSize: this.page.pageSize,
					whereMap: {
						"orgId": this.formData.enterpriseId,
						"proId": this.formData.projectTeamId || "", //"项目id",
						"riskLevel": this.formData.riskLevel, //风险等级
						"constructionPointName": this.formData.constructionPointName, //"工点名称",
						"isWorkedThisMonth": this.formData.isWork, //"当月是否作业",
						"constructionPointRiskLevel": this.formData.distRiskGrade, //"工点风险等级",
						"riskCategoryIds": this.formData.riskCategoryId, //"风险类别id",
						"measureType": this.formData.measureType || null,
						"controlTime":this.formData.date
						// "controlTime": ""
					}
				};
				let title = this.userDetail.projectTeamName || this.userDetail.enterpriseName;
				if(this.list1.length > 0 &&  this.list1[0].title){
					title = this.list1[0].title;
				}
				this.$api.ledgerQuery.exportDynamicControlReport(param).then((data, status, headers, config) => {
					let blob = new Blob([data], {
						type: "application/vnd.ms-excel"
					});
					let date = this.formData.date.split("-");
					if('msSaveOrOpenBlob' in navigator){
						window.navigator.msSaveOrOpenBlob(blob,  title + date[0]+"年"+date[1]+"月" + "在建工程安全风险动态管控表.xlsx");
						return;
					}
					if ('download' in document.createElement('a')) {
						let objectUrl = URL.createObjectURL(blob);
						let a = document.createElement('a');
						document.body.appendChild(a);
						a.setAttribute('style', 'display:none');
						a.setAttribute('href', objectUrl);
						a.setAttribute('download', title +date[0]+"年"+date[1]+"月"+ "在建工程安全风险动态管控表.xlsx");
						a.click();
						URL.revokeObjectURL(objectUrl);
					} else {
						navigator.msSaveBlob(blob, title + date[0]+"年"+date[1]+"月"+"在建工程安全风险动态管控表.xlsx");
					}
				}, (err) => {});
			},

			addBtn(type, id, name) {
				this.$router.push({
					path: `dynamic-control-ledger/${type}/${id}/${name}`,
				})
			},
		},
		mounted() {
			if(this.$route.query.date){
				this.formData.date = this.$route.query.date;
			}
			this.getRiskCategoryFindAll();
			//			this.getOrgTree();
			//1集团 2工程公司 3项目部
			if(this.personType === 3) {
				this.columns.splice(1,2);
				this.formData.enterpriseId = this.userDetail.projectTeamId;
				this.getProTree({
					objectId: this.userDetail.projectTeamId
				})
			} else if(this.personType === 1) {
				this.getOrgTree();
				
			} else if(this.personType === 2) {
				this.columns.splice(1,1)
				this.formData.enterpriseId = this.userDetail.enterpriseId;
				this.getProTree({
					objectId: this.userDetail.enterpriseId
				})
			}

		},
		activated() {
// 			this.getWbsTabelList();
// 			this.getStatistics();
		}
	}
</script>

<style lang="scss" scoped>
	.data-dictionary {
		height: calc(100% - 0px);

		.col-height100 {
			height: 100%;
			border-right: 1px solid #ebeef1;
			overflow: auto;

			p {
				padding: 10px;
			}
		}

		.col-main {
			padding: 10px;

			.button-s {
				margin-bottom: 15px;

				button:not(:last-child) {
					margin-right: 15px;
				}
			}
		}

		.tabs_box {
			color: #f00 !important;
		}
	}
</style>
